<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
    <style>
        html,
        body {
            font-size: 12px;
            margin: 0;
        }
        .icons{
            width:30px;
            height: 30px;
            vertical-align: -10px;
            cursor:pointer;
            margin:0 5px;
        }
        .normal-table,.normal-table__search,.normal-table__navigate{
            width: 100%;
            margin: 10px 0;
        }
        .normal-table__navigate{
            border-bottom:1px solid #ccc;
            padding:10px 0;
            font-size:1.2rem;
        }
        .normal-table__search{
            border-bottom:1px solid #ccc;
            padding:10px 0;
            text-align: center;
        }
        .normal-table__search>input,.normal-table__search>button{
            height:30px;
        }
        .normal-table,
        .normal-table th,
        .normal-table td {
            border-bottom: 1px solid #ccc;
            border-collapse: collapse;
            /*让两个相邻边框合成一个边框*/
        }

        .normal-table tr:first-child {
            border-top: 1px solid #ccc;
        }

        .normal-table td,
        .normal-table th {
            height: 40px;
        }

        .normal-table td {
            text-align: center;
        }

        .normal-table>tbody>tr:nth-child(even) {
            background-color: cornsilk;
        }

        .normal-table>tbody>tr:hover {
            background-color: lightpink;
            cursor: pointer;
        }

        .normal-table th {
            background-color: bisque;
            font-size: 1.2rem;
        }

        .float-left {
            float: left;
            margin-left: 10px;
        }

        .float-right {
            float: right;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <main id="list">
        <nav class="normal-table__navigate">
            <a href="#" style="margin-left:20px">首页</a>&nbsp>&nbsp;<a href="#">文章管理</a>&nbsp;>&nbsp文章列表
        </nav>
        <aside class="normal-table__search">
            <input type="search" name="key_word" value="" placeholder="请输入查询关键字">&nbsp;&nbsp;
            <img id="search" src="../images/icons/search.png" class="icons">
        </aside>
        <table class="normal-table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="all" id="all"></th>
                    <th>文章题目</th>
                    <th>发表时间</th>
                    <th>发表人</th>
                    <th>文章内容</th>
                    <th>文章热度</th>
                </tr>
            </thead>
            <tbody id="normal-tbody">
                <tr>
                    <td><input type="checkbox" class="checkbox-row" id="1"></td>
                    <td>小米10将于2月13日发布</td>
                    <td>2020年2月10日</td>
                    <td>小米粉丝</td>
                    <td>小米10将于2月13日发布，雷军宣布发布会将在网上直播...</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox-row" id="2"></td>
                    <td>俄罗斯政府为何突然全体辞职？相关分析来了</td>
                    <td>2020年1月16日</td>
                    <td>红星深度</td>
                    <td>1月15日，在俄罗斯总统普京发表年度国情咨文后不久，总理梅德韦杰夫宣布政府辞职...</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox-row" id="3"></td>
                    <td>小米10将于2月13日发布</td>
                    <td>2020年2月10日</td>
                    <td>小米粉丝</td>
                    <td>小米10将于2月13日发布，雷军宣布发布会将在网上直播...</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox-row" id="4"></td>
                    <td>小米10将于2月13日发布</td>
                    <td>2020年2月10日</td>
                    <td>小米粉丝</td>
                    <td>小米10将于2月13日发布，雷军宣布发布会将在网上直播...</td>
                    <td>200</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6">
                        <nav class="operation float-left" style="margin-top:8px">
                            <img id="add" src="../images/icons/add.png" class="icons">
                            <img id="update" src="../images/icons/text.png" class="icons">
                            <img id="reduce" src="../images/icons/cut.png" class="icons">
                        </nav>
                        <nav class="page float-right" style="vertical-align: 20px;">
                            <span style="line-height: 40px;">
                                <a href="#">首页</a>&nbsp;&nbsp;
                                <a href="#">上一页</a>&nbsp;&nbsp;
                                <select id="jumpPage">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>&nbsp;&nbsp;
                                <a href="#">下一页</a>&nbsp;&nbsp;
                                <a href="#">尾页</a>
                            </span>
                        </nav>
                    </td>
                </tr>
            </tfoot>
        </table>
    </main>
</body>

</html>
<script>
    //全选或全不选
    document.querySelector("#all").addEventListener("change", event => {
        let flag = event.target.checked;
        let arrays = document.querySelectorAll(".checkbox-row");
        Array.from(arrays).forEach(item => {
            item.checked = flag;
        });
    }, false);
    //点击行选中
    document.querySelector("#normal-tbody").addEventListener("click", event => {
        let td = event.target;
        if (td.tagName.toLowerCase() == "td") {
            let node = td.parentNode.firstElementChild.firstElementChild;
            let flag = node.checked;
            node.checked = !flag;
        }
    }, false);
    //修改操作
    document.querySelector("#update").addEventListener("click",event=>{
        //获取所有class为checkbox-row的复选框中被选中的那些
        let selectedRows = Array.from(document.querySelectorAll(".checkbox-row:checked")); 
        let ids="";
        let sum=0;
        selectedRows.forEach(row=>{
            if(ids==""){
                ids+=row.id;
            }else{
                ids+=",";
                ids+=row.id;
            }
            sum++;
        });
        if(sum==0){
            alert("没有任何数据，请选择数据后再点击修改按钮！");
        }else if(sum==1){
            console.log(ids);
            //TODO:调用AJAX向服务端传值
        }else{
            alert("一次只能修改一行数据！");
        }
    },false);    
    //删除操作
    document.querySelector("#reduce").addEventListener("click",event=>{
        //获取所有class为checkbox-row的复选框中被选中的那些
        let selectedRows = Array.from(document.querySelectorAll(".checkbox-row:checked")); 
        let ids="";
        selectedRows.forEach(row=>{
            if(ids==""){
                ids+=row.id;
            }else{
                ids+=",";
                ids+=row.id;
            }
        });
        if(ids==""){
            alert("没有任何数据，请选择数据后再点击删除按钮！");
        }else{
            let flag = window.confirm("将删除所选行中的数据，是否继续？");
            if(flag){
                console.log(ids);
                //TODO:调用AJAX向服务端传值
            }
        }
    },false);
</script>